<template>
  <div class="toolsBar">
    <el-button type="primary" @click="changePageTheme">
      <img
        :src="
          themeIcon == 'night'
            ? require('@/static/img/night.png')
            : require('@/static/img/daytime.png')
        "
      />
    </el-button>
    <el-button type="primary" @click="telescoping" v-show="telescoping_status"
      ><img src="../static/img/column-width.png"
    /></el-button>
    <el-button type="primary" @click="toTop"
      ><img src="../static/img/up.png"
    /></el-button>
  </div>
</template>

<script>
import { Loading } from "element-ui";
export default {
  props: {
    telescoping_status: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      themeIcon: "night",
      telescopingStatus: 0,
    };
  },
  methods: {
    changePageTheme() {
      if (this.themeIcon == "night") {
        this.themeIcon = "daytime";
        Loading.service({
          text: "正在切换深夜模式",
          background: "transparent",
        });
        setTimeout(() => {
          let path = document.head.querySelector("#skin").href;
          let nowTheme = path.split("/skin/")[1];
          if (nowTheme === "daytime.css") {
            document.head.querySelector("#skin").href = "./skin/night.css";
          } else {
            document.head.querySelector("#skin").href = "./skin/daytime.css";
          }
          Loading.service().close();
        }, 1000);
      } else {
        this.themeIcon = "night";
        Loading.service({
          text: "正在切换白天模式",
          background: "transparent",
        });
        setTimeout(() => {
          let path = document.head.querySelector("#skin").href;
          let nowTheme = path.split("/skin/")[1];
          document.head.querySelector("#skin").href = "./skin/daytime.css";
          Loading.service().close();
        }, 1000);
      }
    },
    toTop() {
      scrollTo(0, 0);
    },
    // 伸缩
    telescoping() {
      if (this.telescopingStatus === 0) {
        document.querySelector("main .w1280").classList.add("telescoping");
        this.telescopingStatus = 1;
      } else {
        document.querySelector("main .w1280").classList.remove("telescoping");
        this.telescopingStatus = 0;
      }
    },
  },
};
</script>

<style scoped>
.toolsBar {
  position: fixed;
  right: 20px;
  top: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 999;
}

.toolsBar .el-button {
  position: relative;
  width: 46px;
  height: 46px;
  margin: 7px 0px;
}

.toolsBar .el-button img {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%) scale(0.8);
  width: 46px;
  height: 46px;
}
</style>